<template>
  <div>
    <nav class="navbar navbar-default navbar-fixed-top header">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle collapsed">
            <span class="sr-only">实验楼</span>
          </button>
          <router-link
            class="navbar-brand"
            :to="{path:'/'}"
          ><img src="../assets/img/logo_03.png"></router-link>
        </div>
        <div
          class="collapse navbar-collapse"
          id="header-navbar-collapse"
        >
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a>
                课程
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <router-link :to="{path: '/courses'}">全部课程</router-link>
                </li>
                <li>
                  <router-link :to="{path: '/courses', query: {status: 'preview'}}">即将上线</router-link>
                </li>
                <li>
                  <router-link :to="{path: '/developer'}">开发者</router-link>
                </li>
              </ul>
            </li>
            <li class="">
              <router-link :to="{path: '/paths'}">路径</router-link>
            </li>
            <li class="">
              <router-link :to="{path: '/questions'}">讨论区</router-link>
            </li>
            <li class=" bootcamp new-nav logo-1111">
              <router-link :to="{path: '/bootcamp'}">训练营</router-link>
            </li>
            <li class=" new-nav logo-1111">
              <router-link :to="{path: '/vip'}">会员</router-link>
            </li>
          </ul>
          <!-- 注册登录 -->
          <div class="navbar-right btns">
            <a
              class="btn btn-default navbar-btn sign-in"
              @click="btnClick('login')"
            >登录</a>
            <a
              class="btn btn-default navbar-btn sign-up"
              @click="btnClick('reg')"
            >注册</a>
          </div>
          <!-- 搜索框 -->
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input
                class="form-control"
                placeholder="搜索 课程/问答"
              >
            </div>
          </form>
        </div>
      </div>
    </nav>
    <!-- 登录/注册 -->
    <el-dialog
      :visible.sync="loginDailogShow"
      width='25%'
    >
      <div class="modal-body">
        <ul class="nav nav-tabs">
          <li :class="{active:loginDailogType=='login'}"><a @click="loginDailogType='login'">登录</a></li>
          <li :class="{active:loginDailogType=='reg'}"><a @click="loginDailogType='reg'">注册</a></li>
        </ul>
        <div class="tab-content">
          <div v-if="loginDailogType=='login'">
            <form>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i
                      class="fa fa-envelope"
                      style="margin:0;"
                    ></i>
                  </div>
                  <input
                    v-model="loginData.email"
                    class="form-control"
                    placeholder="请输入邮箱"
                  >
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i
                      class="fa fa-lock"
                      style="margin:0;"
                    ></i>
                  </div>
                  <input
                    v-model="loginData.password"
                    class="form-control"
                    placeholder="请输入密码"
                  >
                </div>
              </div>
              <div class="form-group remember-login">
                <input
                  v-model="loginData.remember"
                  name="remember"
                  type="checkbox"
                > 下次自动登录
                <a
                  class="pull-right"
                  href=""
                >忘记密码？</a>
              </div>
              <div class="form-group">
                <input
                  @click='login'
                  class="btn btn-primary"
                  value="进入实验楼"
                >
              </div>
              <div class="form-group widget-signin">
                <span>快速登录</span>
                <a @click="oauth('qq')"><i class="fa fa-qq"></i></a>
                <a @click="oauth('weibo')"><i class="fa fa-weibo"></i></a>
              </div>
              <div class="form-group error-msg">
                <div
                  class="alert alert-danger"
                  role="alert"
                >{{errorMessage}}</div>
              </div>
            </form>
          </div>
          <div v-if="loginDailogType=='reg'">
            <form>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i
                      class="fa fa-envelope"
                      style="margin:0;"
                    ></i>
                  </div>
                  <input
                    v-model="regData.email"
                    class="form-control"
                    placeholder="请输入邮箱"
                  >
                </div>
              </div>
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">
                    <i
                      class="fa fa-lock"
                      style="margin:0;"
                    ></i>
                  </div>
                  <input
                    v-model="regData.password"
                    class="form-control"
                    placeholder="请输入密码"
                  >
                </div>
              </div>
              <div class="form-inline form-group">
                <div class="input-group">
                  <input
                    style="width: 49%;"
                    v-model="regData.verifyCode"
                    class="form-control"
                    placeholder="请输入验证码"
                  >
                  <img
                    class="verifycode"
                    :src="verifyimg"
                    @click="getVerifyCodeUrl"
                  >
                </div>
                <img
                  class="verify-code"
                  src=""
                  source="https://www.shiyanlou.com/captcha.gif"
                >
              </div>
              <div class="form-group">
                <input
                  @click="reg"
                  class="btn btn-primary"
                  value="注册"
                >
              </div>
              <div class="form-group agree-privacy">
                注册表示您已经同意我们的<a
                  href="privacy/index.html"
                  target="_blank"
                >隐私条款</a>
              </div>
              <div class="form-group widget-signup">
                <span>快速注册</span>
                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                <a href="/auth/weibo?next="><i class="fa fa-weibo"></i></a>
              </div>
              <div class="form-group error-msg">
                <div
                  class="alert alert-danger"
                  role="alert"
                >{{errorMessage}}</div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync='checkDialog'
      title="检查邮件"
    >请检查邮件, 通过验证链接完成邮箱验证</el-dialog>
  </div>
</template>
<script>
import { generateUUID } from '../utils'
import apis from '../http/user'
export default {
  data() {
    return {
      checkDialog: false, // 检查邮件弹框
      uuid: '', // 保存uuid
      verifyimg: '', // 图片验证码地址
      loginDailogShow: false,
      loginDailogType: 'login', // 登录:login, 注册:reg
      verifyCodeUrl: '', // 验证码地址
      errorMessage: '如果有错误,这里显示', // 登录/注册错误信息
      regData: {
        nickName: '',
        email: '252319634@qq.com',
        password: '1234qwer',
        verifyCode: ''
      },
      loginData: {
        email: 'login@123.com',
        password: 'xxxxxxxx',
        remember: true
      },
      userInfo: {
        userName: '',
        level: 0,
        isLogin: false,
        isVip: false
      }
    }
  },
  mounted() {
    this.getVerifyCodeUrl()
  },
  methods: {
    btnClick(type) {
      this.loginDailogShow = true
      this.loginDailogType = type
    },
    login() {
      console.log(this.reg)
    },
    reg() {
      let params = this.regData
      params.uuid = this.uuid
      // {
      //   nickName: '',
      //   email: 'reg@123.com',
      //   password: 'xxxxxxxx',
      //   verifyCode: ''
      // }
      apis.register(params).then(data => {
        if (data.code === 0) {
          this.loginDailogShow = false
          this.checkDialog = true
        }
      })
      console.log('reg')
    },
    oauth(type) {
      console.log('oauth:' + type)
    },
    getVerifyCodeUrl() {
      this.uuid = generateUUID()
      let baseUrl = localStorage.BaseUrl
      this.verifyimg = baseUrl + '/user/generate_image_code/' + '?uuid=' + this.uuid
      // console.log(uuid)
      // // console.log(getVerifiImg())
      // apis.getVerifiImg({ uuid }).then(data => {
      //   console.log(data)
      // }).catch(e => {
      //   console.log(e)
      // })
      console.log('获取验证码图片')
    }
  }
}
</script>
<style scoped>
.verifycode {
  width: 49%;
  height: 34px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>
